<template>
  <!-- 变电站 -->
  <div class="substation-box">
    <TitleBox titleName="变电站">
      <EasyBar :dataList="dataList" :yAxisUnit="yAxisUnit" @click="toPages"></EasyBar>
    </TitleBox>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBox from "./TitleBox.vue";
import EasyBar from "../echa/EasyBar.vue";
@Component({
  components: {
    TitleBox,
    EasyBar,
  },
})
export default class extends Vue {
  //传图表得数据
  public dataList: any = [
    { name: "未巡检", value: 0 },
    { name: "巡检中", value: 0 },
    { name: "已巡检", value: 0 },
    { name: "巡检失败", value: 0 },
  ];
  mounted() {
    this.getbdzJH();
  }
  public yAxisUnit: string = "单位：个";
  // 页面跳转
  toPages(val: any): void {
    console.log(val);
    var state =''
    if (val.name=='未巡检') {
      state='0'
    }
    if (val.name=='巡检中') {
      state='1'
    }
    if (val.name=='已巡检') {
      state='2'
    }
    if (val.name=='巡检失败') {
      state='3'
    }
    this.$router.push({
      name: "inspectionresult",
      query: {
        state: state,
      },
    });
  }
  // 饼图数据获取
  getbdzJH() {
    (this as any).$services
      .getbdzJH()
      .then((result: any) => {
        let data = result.data || [];
        data = data[0] || {};
        this.dataList[0].value = data.WZX || 0;
        this.dataList[1].value = data.ZXZ|| 0;
        this.dataList[2].value = data.YZX|| 0;
        this.dataList[3].value = data.ZXSB|| 0;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.substation-box {
  width: 100%;
  height: 100%;
}
</style>

